<template>
    <div class="topic_cont flex_column_between" ref="boxfull"  v-loading="loading">
        <h5 class="title">{{ course.name || '' }}</h5>
        <template v-if="articleLists.length > 0">
            <div class="level_cont">
                <div class="item transition flex_center_center " 
                    v-for="(article, index) in articleLists" :key="index" 
                    @click="chooseArticleFun(article)"
                    :class="{active: chooseArticle.id == article.id }"
                >
                    <div class="level_box flex_center_center" :class="{active1: chooseArticle.id == article.id }">
                        <div class="font-24">关卡</div>
                        <div class="num" >{{ index < 9 ? '0' + parseInt(index + 1) : parseInt(index + 1) }}</div>
                    </div>
                    <img class="finish_img" src="@/assets/img/yes_1.png"  v-if="article.isLearned == 1"/>
                </div>
                <div class="item1"></div>
                <div class="item1"></div>
                <div class="item1"></div>
            </div>
            <el-button
                v-loading="confirmLoading"
                id="fullscreen_button"
                style="width: 208px; margin: 2.4rem 0"
                type="primary"
                @click="confirmChoose"
            >
                确认选择
            </el-button>
        </template>
        <empty type="1" text="暂无关卡" v-else />
    </div>
</template>

<script>
import { exerciseInfo } from '@/api/articleExercise.js'
import { articleList } from '@/api/courseArticle.js'
import bear_content from '@/views/components/bear_content.vue'

export default {
    components:{ bear_content },
    data() {
        return {
            loading: false,
            confirmLoading: false,
            exerciseId: '',
            courseId: '',
            course: {},
            exercise: {},
            articleLists: [],
            levelData: [],
            userId: 0,
            idx:0,
            detectoverflow: false,
            chooseArticle: {}
        }
    },
    mounted(){
        this.exerciseId = this.$route.query.exerciseId
        this.userId = this.$route.query.userId || 0
        if (this.exerciseId) {
            this.getExercise()
        }
    },
    methods:{
        getExercise() {
            this.loading = true
            exerciseInfo({id: this.exerciseId, userId: this.userId}).then(res => {
                this.loading = false
                if (res.error == 0) {
                    this.exercise = res.data
                    this.course = res.data.course
                    this.getArticleList()
                }
            }).finally(() => {
                this.loading = false
            })
        },
        // 获取文章列表
        getArticleList() {
            this.loading = true
            let courseId = this.course ? this.course.id : 0
            articleList({courseId: courseId, userId: this.userId}).then(res => {
                this.loading = false
                if (res.error == 0) {
                    this.articleLists = res.data
                }
            }).finally(() => {
                this.loading = false
            })
        },
        chooseArticleFun(article){
            this.chooseArticle = article
        },
        //确认选择
        confirmChoose() {
            if (!this.chooseArticle || !this.chooseArticle.id) {
                this.$message.error('请选择关卡')
                return
            }

            console.log('chooseArticle', this.chooseArticle);
           
            let category = this.chooseArticle.category ? this.chooseArticle.category.id : 0

            if (category == 8) {
                if (this.exercise && this.exercise.log && this.exercise.log.article.id == this.chooseArticle.id  && this.exercise.articleLimit && this.exercise.surplusCount == 0) {
                        let path = '/reading/words/answer?exerciseId=' + this.exerciseId + '&articleId=' + this.chooseArticle.id
                        if (this.userId) {
                            path += '&userId=' + this.userId
                        }
                        this.$router.push(path)
                }else {
                    let path = '/reading/words/info?exerciseId=' + this.exerciseId + '&articleId=' + this.chooseArticle.id
                    if (this.userId) {
                        path += '&userId=' + this.userId
                    }
                    this.$router.push(path)
                }
            }else {
                if (this.exercise && this.exercise.log && this.exercise.log.article.id == this.chooseArticle.id  && this.exercise.articleLimit && this.exercise.surplusCount == 0) {
                        let path = '/reading/answer?exerciseId=' + this.exerciseId + '&articleId=' + this.chooseArticle.id
                        if (this.userId) {
                            path += '&userId=' + this.userId
                        }
                        this.$router.push(path)
                }else {
                    let path = '/reading/info?exerciseId=' + this.exerciseId + '&articleId=' + this.chooseArticle.id
                    if (this.userId) {
                        path += '&userId=' + this.userId
                    }
                    this.$router.push(path)
                }
            }
            
            

        }
    }
}
</script>

<style lang="scss" scoped>

.topic_cont{
    width: 100%;
    height: 100%;
    padding: 0 2.4rem;
}
.title{
    padding: 2rem 0;
    font-size: 3.2rem;
    color: #1A1A1A;
    font-weight: normal;
}
.level_cont{
    width: 100%;
    height:0;
    flex: 1;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-content: start;
    padding-top: 1rem;
    // flex-direction: row;
    overflow-y: scroll;
    overflow: auto;
    align-self:baseline;
    box-sizing: border-box;
    // margin-top: 20px;
    padding:1rem 10rem 0;
    border-bottom: 2px solid #F7F8FA;
    .item{
        width: 22%;
        min-height: 20.7rem;
        text-align: center;
        line-height: 4.8rem;
        padding: 1.6rem;
        background: linear-gradient(180deg, #ECECED 86%, #DFDFE2 100%);
        border-radius: 10px;
        font-size: 2.4rem;
        margin-bottom: 2.4rem;
        cursor: pointer;
        position: relative;

        .level_box{
            width: 100%;
            height: 100%;
            background: #F7F8FA;
            border-radius: 10px;
            .num{
                font-size: 6rem;
                margin-top: 1.6rem;
                font-weight: 500;
            }
        }
        .finish_img{
            position: absolute;
            width: 5.4rem;
            height: 5.4rem;
            top: -.8rem;
            right: -.9rem;
        }
        .active1{
            background: #FFF5E0;
        }
    }
    .item1{
        width: 22%;
        height: 20.7rem;
    }
    .active{
        background: linear-gradient(180deg, #FEC554 86%, #FEAC0C 100%);
    }
    

    &::-webkit-scrollbar {
        width: 6px;
        height: 1px;
    }
    /* 滑块部分 */
    &::-webkit-scrollbar-thumb { 
        border-radius: 5px;
        background-color:#019E69;
    }
    /* 轨道部分 */
    &::-webkit-scrollbar-track { 
    //   box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        background: #fff;
        border-radius: 5px;
    }

}

</style>
